<!DOCTYPE html>
<html>
<head>
    <title>Capacitor with Two Dielectrics</title>
</head>
<body>
<canvas id="canvas" width="450" height="350"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // --- Configuration Parameters ---
    const capX = 80;
    const capY = 60;
    const capWidth = 250;
    const plateThickness = 10;
    const d1_height = 80; // Visual height for the first dielectric layer
    const d2_height = 60; // Visual height for the second dielectric layer
    const capCenterX = capX + capWidth / 2;
    const interfaceY = capY + plateThickness + d1_height;
    const bottomPlateY = interfaceY + d2_height;

    // --- Style Settings ---
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // --- Drawing Functions ---

    /**
     * Draws a vertical dimension line with arrows and a label with a subscript.
     * @param {number} x - The x-coordinate of the dimension line.
     * @param {number} yStart - The starting y-coordinate.
     * @param {number} length - The length of the dimension.
     * @param {string} label - The main part of the label (e.g., 'd').
     * @param {string} labelSub - The subscript part of the label (e.g., '1').
     */
    function drawVerticalDimension(x, yStart, length, label, labelSub) {
        const yEnd = yStart + length;
        const arrowSize = 6;

        ctx.beginPath();
        // Vertical line
        ctx.moveTo(x, yStart);
        ctx.lineTo(x, yEnd);
        // Top arrow
        ctx.moveTo(x - arrowSize / 2, yStart + arrowSize);
        ctx.lineTo(x, yStart);
        ctx.lineTo(x + arrowSize / 2, yStart + arrowSize);
        // Bottom arrow
        ctx.moveTo(x - arrowSize / 2, yEnd - arrowSize);
        ctx.lineTo(x, yEnd);
        ctx.lineTo(x + arrowSize / 2, yEnd - arrowSize);
        ctx.stroke();

        // Label
        ctx.fillStyle = 'black';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        const yLabel = yStart + length / 2;
        ctx.font = 'italic 20px "Times New Roman"';
        const labelMetrics = ctx.measureText(label);
        ctx.fillText(label, x + 15, yLabel);
        ctx.font = 'italic 15px "Times New Roman"';
        ctx.fillText(labelSub, x + 15 + labelMetrics.width - 4, yLabel + 6);
    }
    
    /**
     * Draws the epsilon label with a subscript.
     * @param {number} x - The x-coordinate for the label center.
     * @param {number} y - The y-coordinate for the label center.
     * @param {string} sub - The subscript text.
     */
    function drawEpsilonLabel(x, y, sub) {
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        ctx.font = '22px "Times New Roman"';
        ctx.fillText('ε', x, y);
        ctx.font = '16px "Times New Roman"';
        ctx.fillText(sub, x + 10, y + 7);
    }

    // --- Main Drawing Logic ---

    // Draw dielectric 1 (top layer)
    ctx.fillStyle = '#f0f0f0'; // Light gray
    ctx.fillRect(capX, capY + plateThickness, capWidth, d1_height);

    // Draw dielectric 2 (bottom layer)
    ctx.fillStyle = '#d3d3d3'; // Darker gray
    ctx.fillRect(capX, interfaceY, capWidth, d2_height);
    
    // Draw outline for the dielectric block
    ctx.strokeRect(capX, capY + plateThickness, capWidth, d1_height + d2_height);

    // Draw capacitor plates
    ctx.fillStyle = 'black';
    ctx.fillRect(capX, capY, capWidth, plateThickness);
    ctx.fillRect(capX, bottomPlateY, capWidth, plateThickness);

    // Draw connecting wires
    ctx.beginPath();
    ctx.moveTo(capCenterX, capY);
    ctx.lineTo(capCenterX, capY - 40);
    ctx.moveTo(capCenterX, bottomPlateY + plateThickness);
    ctx.lineTo(capCenterX, bottomPlateY + plateThickness + 40);
    ctx.stroke();

    // Draw dimension lines and their labels
    const dimX = capX + capWidth + 30;
    drawVerticalDimension(dimX, capY + plateThickness, d1_height, 'd', '1');
    drawVerticalDimension(dimX, interfaceY, d2_height, 'd', '2');

    // Draw internal dielectric labels
    drawEpsilonLabel(capCenterX - 60, capY + plateThickness + d1_height / 2, '1');
    drawEpsilonLabel(capCenterX - 60, interfaceY + d2_height / 2, '2');

    // Draw caption
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.font = '20px "SimSun", "STSong", "KaiTi"'; // Font stack for Chinese characters
    ctx.fillText('习题 7-55 图', canvas.width / 2, bottomPlateY + plateThickness + 70);

</script>
</body>
</html>